<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端文件上传工具</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background-color: #f5f7fa;
      padding: 16px;
      color: #333;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-bottom: 20px;
    }
    
    .card-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #2c3e50;
      display: flex;
      align-items: center;
    }
    
    .card-title i {
      margin-right: 8px;
      color: #3498db;
    }
    
    /* 文件上传区域 */
    .upload-area {
      margin-bottom: 20px;
    }
    
    .file-input-container {
      position: relative;
      margin-bottom: 16px;
    }
    
    .btn {
      display: inline-block;
      padding: 12px 20px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s;
    }
    
    .btn:hover {
      background-color: #2980b9;
    }
    
    .btn-upload {
      width: 100%;
    }
    
    #file-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
    
    .file-info {
      color: #7f8c8d;
      font-size: 14px;
      margin-top: 8px;
      text-align: center;
    }
    
    /* 进度条 */
    .progress-container {
      margin: 20px 0;
      display: none;
    }
    
    .progress-bar {
      height: 8px;
      background-color: #eee;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    
    .progress-fill {
      height: 100%;
      background-color: #2ecc71;
      border-radius: 4px;
      width: 0%;
      transition: width 0.3s;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #7f8c8d;
    }
    
    /* 文本区域 */
    .text-area {
      margin-bottom: 20px;
    }
    
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 16px;
      min-height: 120px;
      resize: vertical;
      margin-bottom: 12px;
    }
    
    .text-actions {
      display: flex;
      gap: 10px;
    }
    
    .btn-text {
      flex: 1;
      padding: 10px;
      font-size: 14px;
    }
    
    .btn-set {
      background-color: #3498db;
    }
    
    .btn-set:hover {
      background-color: #2980b9;
    }
    
    .btn-copy {
      background-color: #2ecc71;
    }
    
    .btn-copy:hover {
      background-color: #27ae60;
    }
    
    .btn-clear {
      background-color: #e74c3c;
    }
    
    .btn-clear:hover {
      background-color: #c0392b;
    }
    
    .text-message {
      margin-top: 12px;
      font-size: 14px;
      color: #7f8c8d;
      text-align: center;
    }
    
    /* 文件列表 */
    .file-list {
      margin-top: 20px;
    }
    
    .table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    
    .table th {
      background-color: #f8f9fa;
      color: #2c3e50;
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
    
    .table td {
      padding: 12px;
      border-bottom: 1px solid #eee;
      vertical-align: top;
    }
    
    .table tr:last-child td {
      border-bottom: none;
    }
    
    .file-name {
      word-break: break-all;
      line-height: 1.4;
    }
    
    .btn-download {
      color: #3498db;
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      display: block;
      padding: 6px 0;
    }
    
    .btn-download:hover {
      text-decoration: underline;
    }
    
    .empty-state {
      text-align: center;
      padding: 30px 0;
      color: #7f8c8d;
      font-size: 14px;
    }
    
    .empty-state i {
      font-size: 40px;
      margin-bottom: 12px;
      color: #bdc3c7;
    }
    
    /* 响应式调整 */
    @media (max-width: 480px) {
      .card {
        padding: 16px;
      }
      
      .card-title {
        font-size: 16px;
      }
      
      .btn {
        padding: 10px 16px;
        font-size: 14px;
      }
      
      textarea {
        font-size: 14px;
      }
      
      .text-actions {
        flex-direction: column;
        gap: 8px;
      }
    }
    
    /* 加载动画 */
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* 自定义图标 */
    .icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: middle;
    }
    
    /*.icon-upload {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
    }
    
    .icon-text {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z'/%3E%3C/svg%3E");
    }
    
    .icon-files {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M17 20H7V10H5v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3h-2v3zM14 4h-4V2h4v2zM7 6H5v14h2V6zm14-2V2h-6v2h6zM7 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h2v-16zm10 18V4c0-1.1-.9-2-2-2h-6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2z'/%3E%3C/svg%3E");
    }
    
    .icon-empty {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdc3c7'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
      width: 60px;
      height: 60px;
      margin-bottom: 12px;
    }*/
  </style>
  <script type="text/javascript" src="./js/jquery3.4.1.js"></script>
</head>
<body>
  <div class="container">
    <div class="card upload-area">
      <h2 class="card-title">
        <span class="icon icon-upload"></span>文件上传
      </h2>
      
      <div class="file-input-container">
        <button class="btn btn-upload">选择文件</button>
        <input type="file" id="file-input" name="file[]" multiple>
      </div>
      
      <div id="file-info" class="file-info">请选择文件后点击上传按钮</div>
      
      <div class="progress-container" id="progress-container">
        <div class="progress-bar">
          <div class="progress-fill" id="progress-fill"></div>
        </div>
        <div class="progress-text">
          <span>上传进度</span>
          <span id="progress-percent">0%</span>
        </div>
      </div>
      
      <button id="upload-btn" class="btn" style="width: 100%; margin-top: 16px;">上传文件</button>
    </div>
    
    <div class="card text-area">
      <h2 class="card-title">
        <span class="icon icon-text"></span>文本工具
      </h2>
      
      <textarea id="text-input" placeholder="在这里输入或粘贴文本..."></textarea>
      
      <div class="text-actions">
        <button id="copy-btn" class="btn btn-text btn-copy">设置/复制文本</button>
        <button id="clear-btn" class="btn btn-text btn-clear">清空文本</button>
      </div>
      
      <div id="text-message" class="text-message"></div>
    </div>
    
    <div class="card file-list">
      <h2 class="card-title">
        <span class="icon icon-files"></span>已上传文件
      </h2>
      
      <table class="table">
        <thead>
          <tr>
            <th>文件名</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="file-list-body">
          <tr class="empty-state">
            <td colspan="2" style="text-align: center;">
              <div class="icon icon-empty"></div>
              <p>暂无上传文件</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    // DOM元素
    const fileInput = document.getElementById('file-input');
    const fileInfo = document.getElementById('file-info');
    const uploadBtn = document.getElementById('upload-btn');
    const progressContainer = document.getElementById('progress-container');
    const progressFill = document.getElementById('progress-fill');
    const progressPercent = document.getElementById('progress-percent');
    const fileListBody = document.getElementById('file-list-body');
    const textInput = document.getElementById('text-input');
    const copyBtn = document.getElementById('copy-btn');
    const clearBtn = document.getElementById('clear-btn');
    const textMessage = document.getElementById('text-message');
    
    // 文件选择事件
    fileInput.addEventListener('change', function() {
      const files = this.files;
      if (files.length > 0) {
        if (files.length > 50) {
          showFileInfo('单次最多上传50个文件', 'error');
          this.value = ''; // 清空选择
          return;
        }
        
        let fileInfoText = `已选择 ${files.length} 个文件`;
        
        // 显示第一个文件信息作为示例
        const firstFile = files[0];
        const fileSize = formatFileSize(firstFile.size);
        fileInfoText += ` (示例: ${firstFile.name}, ${fileSize})`;
        
        showFileInfo(fileInfoText);
      } else {
        showFileInfo('请选择文件后点击上传按钮');
      }
    });
    
    // 上传按钮点击事件
    uploadBtn.addEventListener('click', function() {
      const files = fileInput.files;
      
      if (files.length === 0) {
        showFileInfo('请先选择文件', 'error');
        return;
      }
      
      uploadFiles(files);
    });
    
    // 上传文件函数
    function uploadFiles(files) {
      const formData = new FormData();
      
      // 添加文件到FormData
      for (let i = 0; i < files.length; i++) {
        formData.append(`file[${i}]`, files[i]);
      }
      
      // 创建XMLHttpRequest对象
      const xhr = new XMLHttpRequest();
      
      // 显示进度条
      progressContainer.style.display = 'block';
      uploadBtn.disabled = true;
      uploadBtn.innerHTML = '<div class="loading"></div>';
      
      // 上传进度事件
      xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
          const percent = Math.min(Math.round((e.loaded / e.total) * 100), 99);
          updateProgress(percent);
        }
      });
      
      // 上传完成事件
      xhr.addEventListener('load', function() {
        try {
          const response = JSON.parse(xhr.responseText);
          
          if (response.code === 0) {
            updateProgress(100);
            showFileInfo('上传成功', 'success');
            getFileList(); // 刷新文件列表
            
            // 重置文件输入
            fileInput.value = '';
            
            // 2秒后隐藏进度条
            setTimeout(() => {
              progressContainer.style.display = 'none';
            }, 2000);
          } else {
            showFileInfo(response.msg || '上传失败', 'error');
          }
        } catch (error) {
          showFileInfo('上传失败: 服务器响应错误', 'error');
        } finally {
          // 恢复按钮状态
          uploadBtn.disabled = false;
          uploadBtn.innerHTML = '上传文件';
        }
      });
      
      // 上传错误事件
      xhr.addEventListener('error', function() {
        showFileInfo('上传失败: 网络错误', 'error');
        uploadBtn.disabled = false;
        uploadBtn.innerHTML = '上传文件';
      });
      
      // 发送请求
      xhr.open('POST', './php/upload.php', true);
      xhr.send(formData);
    }
    
    // 更新进度条
    function updateProgress(percent) {
      progressFill.style.width = `${percent}%`;
      progressPercent.textContent = `${percent}%`;
    }
    
    // 显示文件信息
    function showFileInfo(message, type = 'info') {
      fileInfo.textContent = message;
      
      // 重置样式
      fileInfo.className = 'file-info';
      
      // 添加类型样式
      if (type === 'error') {
        fileInfo.style.color = '#e74c3c';
      } else if (type === 'success') {
        fileInfo.style.color = '#2ecc71';
      }
    }
    
    // 格式化文件大小
    function formatFileSize(bytes) {
      if (bytes < 1024) return bytes + ' B';
      else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB';
      else return (bytes / 1048576).toFixed(2) + ' MB';
    }
    
    // 获取文件列表
    function getFileList() {
      const xhr = new XMLHttpRequest();
      
      xhr.addEventListener('load', function() {
        try {
          const response = JSON.parse(xhr.responseText);
          
          if (response.data && response.data.length > 0) {
            renderFileList(response.data);
          } else {
            renderEmptyState();
          }
        } catch (error) {
          renderEmptyState('无法加载文件列表');
        }
      });
      
      xhr.addEventListener('error', function() {
        renderEmptyState('无法加载文件列表');
      });
      
      xhr.open('GET', './php/getFile.php', true);
      xhr.send();
    }
    
    // 渲染文件列表
    function renderFileList(files) {
      fileListBody.innerHTML = '';
      
      files.forEach(file => {
        const row = document.createElement('tr');
        
        const nameCell = document.createElement('td');
        nameCell.className = 'file-name';
        nameCell.innerHTML = `<span title="${file}">${file}</span>`;
        
        const actionCell = document.createElement('td');
        actionCell.innerHTML = `<a href="./tmp/${file}" target="_blank" class="btn-download">下载</a>`;
        
        row.appendChild(nameCell);
        row.appendChild(actionCell);
        fileListBody.appendChild(row);
      });
    }
    
    // 渲染空状态
    function renderEmptyState(message = '暂无上传文件') {
      fileListBody.innerHTML = `
        <tr class="empty-state">
          <td colspan="2" style="text-align: center;">
            <div class="icon icon-empty"></div>
            <p>${message}</p>
          </td>
        </tr>
      `;
    }
    
    
    // 复制文本按钮点击事件
    copyBtn.addEventListener('click', function() {
      const text = textInput.value.trim();
      $.ajax({
        'url': './php/setVal.php',
        'type': 'post',
        'data': {'text': text},
        'dataType':'json',
        success:function(result){
          if (result.code == '1')
          {
            let text1 = result.data;
            textInput.value = text1;
            // 尝试复制到剪贴板
            if (navigator.clipboard) {
              navigator.clipboard.writeText(text1)
                .then(() => {
                  showTextMessage('复制成功', 'success');
                })
                .catch(() => {
                  fallbackCopyText(text1);
                });
            } else {
              fallbackCopyText(text1);
            }
            
          }
          else
          {
            showTextMessage('文本设置成功', 'success');
          }
        }
      });
      
    });
    
    // 备用复制文本方法
    function fallbackCopyText(text) {
      textInput.select();
      textInput.setSelectionRange(0, 99999); // 兼容移动设备
      
      try {
        const successful = document.execCommand('copy');
        if (successful) {
          showTextMessage('复制成功', 'success');
        } else {
          showTextMessage('复制失败，请手动复制', 'error');
        }
      } catch (err) {
        showTextMessage('复制失败，请手动复制', 'error');
      }
      
      // 取消选择
      window.getSelection().removeAllRanges();
    }
    
    // 清空文本按钮点击事件
    clearBtn.addEventListener('click', function() {
      textInput.value = '';
      showTextMessage('文本已清空');
    });
    
    // 显示文本操作消息
    function showTextMessage(message, type = 'info') {
      textMessage.textContent = message;
      
      // 重置样式
      textMessage.className = 'text-message';
      
      // 添加类型样式
      if (type === 'error') {
        textMessage.style.color = '#e74c3c';
      } else if (type === 'success') {
        textMessage.style.color = '#2ecc71';
      }
      
      // 3秒后清除消息
      setTimeout(() => {
        textMessage.textContent = '';
      }, 3000);
    }
    
    // 页面加载时获取文件列表
    document.addEventListener('DOMContentLoaded', function() {
      getFileList();
    });
     // 检测设备类型的函数
        function detectDevice() {
            // 移动设备检测正则表达式
            const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
            
            // 检测用户代理
            const isMobile = mobileRegex.test(navigator.userAgent);
            
            // 根据设备类型跳转
            if (isMobile) {
                // 移动端跳转到手机版页面
                // window.location.href = 'index_phone.html';
            } else {
                // 电脑端跳转到电脑版页面
                window.location.href = 'index.html';
            }
        }
        
        // 页面加载完成后执行检测
        window.onload = detectDevice;
  </script>
</body>
</html>
